<style>
    
ul{
    background-color: black;
    list-style: none;
}
ul li{
    height: 30px;
    background-color: aqua;
    margin: 10px 0;
}
/* .tip{
    position: relative;
    margin-left: 20px;
    margin-top: 20px;
    width: 200px;
    background: black;
    padding: 10px;
    border-radius: 5px;
} */
/* .tips{
    
    display: none;
    position: absolute;
    bottom: -10px;
    left: 20px;
    width: 0;height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #ccc;
    pointer-events: none;

} */
.tips{
    display: none;
    position: absolute;
    pointer-events: none;
    width: 50px;
    /* width: 120px; */
    /* display: inline-block; */
    font-size: 14px;
    color: #333;
    line-height: 16px;
    background: #f0981c;
    /* position: relative; */
    padding: 10px;border-radius: 5px;
}
.tips:after{
    content: ' ';
    border-top: 8px solid #F0981C;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    /* position: absolute; */
    position: absolute;
    bottom: -8px;
    right: 20px;
}
</style>

<ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <li>04</li>
    <li>05</li>
</ul> 
    <div class="tips"><p>提示框</p></div>
<script>
    var ulObj= document.querySelector('ul')
    ulObj.onmousemove=function(evt){
        var e =evt || window.event
        var target =e.target||e.srcElement
        if(target.nodeName !== 'LI'){
            var tipsObj =document.querySelector('.tips')
            tipsObj.style.display='block'
            // tipsObj.style.left =e.clientX/2+'px'
            tipsObj.style.left =e.clientX-40+'px'
            tipsObj.style.top =e.clientY-70+'px'
        }
        if(target.nodeName == 'LI'){
            var tipsObj =document.querySelector('.tips')
            tipsObj.style.display='none'
        }
    }
</script>